/* eslint-disable object-curly-newline */
import React from "react";
import { Button, Tag, Tabs, Breadcrumb, ConfigProvider } from "antd";
import Crum from "../../components/Crumb";
import API from "./api";
import ServeConfig from "./serverConfig";
import Log from "./serverLog";

import "./index.css";

import g from "./g.png";

const items = [
  {
    key: "1",
    label: `接口调用`,
    children: <API />,
  },
  {
    key: "2",
    label: `参数配置`,
    children: <ServeConfig />,
  },
  {
    key: "3",
    label: `服务日志`,
    children: <Log />,
  },
];
class ComponentDetails extends React.Component {
  constructor() {
    super();
    this.state = {};
  }

  onChange = (key) => {
    console.log(key);
  };

  render() {
    const breadcrumbItems = [
      {
        title: "首页",
        href: "/",
      },
      // {
      //   title: <a href="/sitList">开发测试环境（SIT）</a>
      // },
      {
        title: "合同监管系统",
        href: "/sitDetail",
      },
      {
        title: "合同监管系统组件1.0.0.12",
      },
      {
        title: "详情",
      },
    ];
    return (
      <>
        <div style={{ display: "flex", alignItems: "center" }}>
          <Button
            type="text"
            onClick={() => {
              window.history.back();
            }}
          >
            {`< 返回`}
          </Button>
          <Breadcrumb separator=">" items={breadcrumbItems} />
        </div>
        <div className="content">
          <div className="left">
            <img src={g} alt="" />
            <h3>合同监管体系组件（1.0.0.12）</h3>
            <p>
              <span>IP</span>
              <span>192.250.250.250</span>
            </p>
            <p>
              <span>状态</span>
              <span>
                <Tag color="#f50">停止</Tag>
              </span>
            </p>
            <p>
              <span>CPU</span>
              <span>2.13Core/4Core</span>
            </p>
            <p>
              <span>内存</span>
              <span>2.2GB/8GB</span>
            </p>
            <Button type="primary">运维</Button>
          </div>
          <div className="right">
            <ConfigProvider
              theme={{
                token: {
                  cardBg: "rgba(248, 251, 255, 1)",
                },
              }}
            >
              <Tabs
                defaultActiveKey="1"
                items={items}
                onChange={this.onChange}
              />
            </ConfigProvider>
          </div>
        </div>
      </>
    );
  }
}

export default ComponentDetails;
